<template>
	<zui-box>

		<!-- 头部导航 -->
		<zui-navbar title='选择支付方式'></zui-navbar>
		
	
		
		
		<u-gap height="30rpx"></u-gap>
		
		<zui-flat>
			<u-gap height="30rpx"></u-gap>
			<view class="flat_title">支付方式</view>
			<u-gap height="30rpx"></u-gap>
			<view class="list">
				<u-radio-group placement="column" v-model="pay_type" iconColor="#232539">
					<view class='item' v-for='(item,index) in channelList' :key='index' @click="channel_opt(item)">
						<u-cell :border='false' :title="item.channel_name">
							<u-icon slot="icon" size="30rpx" :name="item.bg_image"></u-icon>
							<u-radio slot="value" :name="item.id" activeColor="#F1B863"></u-radio>
						</u-cell>
					</view>
				</u-radio-group>
			</view>

		</zui-flat>

		<!-- //底部 -->

		<zui-foot>
			<!-- 提交按钮 -->
			<zui-submit :price='total_price_show*1' @submit="submit" buttonText="支付">

				<!-- <u-checkbox-group>
				<u-checkbox name="全选" label="全选" shape="circle" active-color="#F1B863"><span>全选</span></u-checkbox>
			</u-checkbox-group> -->
			</zui-submit>
		</zui-foot>


	<u-modal :show="password_show" title="支付密码">
	
		<view class="slot-content">
			<u-gap height="30rpx"></u-gap>
			<u-input v-model="password" type="password" maxlength="6" shape="circle" placeholder="请输入确认支付密码"
				border="none" clearable color="#999">
			</u-input>
		</view>
	
		<view slot='confirmButton'>
			<zui-button @fun="balance_pay()">确认</zui-button>
		</view>
	
	</u-modal>



<view id="payDiv" v-show="false">h5支付</view>

	</zui-box>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: '',
				number: '',
				specs_id: '',
				address_id: '',
				//优惠券
				coupon_use_state: '', //是否可以使用优惠券1-是 0-否
				coupon: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				coupon_id: '', //被选中和的孩子
				coupon_show: false, //优惠券显示
				//购物券
				voucher_use_state: '', //是否可以使用购物券 1-是 0-否
				voucher_num: [], //被选中和的购物券

				//支付列表
				channelList: [], //支付列表
				pay_type: '', //选中的支付


				trade_weight: '', //抵扣个数
				cart_field: '', //购物车字段


				total_price: '', //总价格
				total_price_show: '', //总价格底部展示

				password_show: false, //密码输入框
				password: '',

				order: '', //生成的订单数据

				module_id: '', //商品类型
				type: '',
				order_id: '',


			};
		},
		//页面加载完毕
		onLoad(e) {
			console.log(e);
			//普通商品
			this.order_id = e.order_id;
		},
		//每次进入页面
		onShow() {
			//获取接口
			this.step();
		},

		methods: {
			step() {
				//获取商品详情
				this.get_info();
				//获取支付列表
				this.get_payData();
			},
			//第一步获取页面订单信息
			get_info() {
				
				// 获取页面订单信息
				uni.$u.http.get('/app/order_product/detail', {
					params: {
						order_id:this.order_id
					},
					custom: {
						auth: true,
						toast: false,
						catch: false,
					},
				}).then(res => {
					console.log('订单数据------------', res);
					// 全部数据
					this.total_price_show = res.actual_price
					

				}).catch(err => {

				})

			},
			//第二步获取支付列表
			get_payData() {

				// 获取页面订单信息
				uni.$u.http.get('/app/payment_channel/channelList', {
					params: {},
					custom: {
						auth: true,
						toast: false,
						catch: false,
					},
				}).then(res => {
					console.log('获取支付列表', res);

					let newlist = [];
					// 判断app h5
					// #ifdef APP
					res.forEach(item => {
						if (item.type.indexOf('_h5') == -1) {
							newlist.push(item);
						}
					});
					console.log('app', newlist);
					// #endif

					// #ifdef H5

					res.forEach(item => {
						if (item.type.indexOf('_app') == -1) {
							newlist.push(item);
						}
					
					});
					console.log('h5', newlist);
					// #endif

					// this.type = newlist[0].type;
					// this.recharge_type = newlist[0].id;
					this.channelList = newlist;
					// this.channelList = res;

				}).catch(err => {})

			},
			//第三步选择支付类型
			channel_opt(item) {
				this.pay_type = item.id
				console.log(item);
			},

			//第四步进行下单
			submit() {
				console.log('下单',this.pay_type)
				let that = this;
				
				console.log('---------------',this.channelList);

				let type = ''
				this.channelList.forEach(item => {
						if (item.id == this.pay_type) {
							type = item.type
						}
				});
					
					
				//余额支付
				
				
						if (type == "balance") {
							that.password_show = true;
						}
						//银行卡支付
						if (type == "bank") {
							
							uni.$u.route('pages/one_mouth/bank_pay', {
								pay_type: that.pay_type,
								order_id: that.order_id,
								module_id: that.module_id,
							});
						}

						if (type == "ali_app") {
							console.log('支付支付app', that.order.non_str);
							this.ali_app();
							
						}
						if (type == "wx_app") {
							console.log('支付支付app', that.order.non_str);
							// this.app_wx_pay(res.order.non_str);
						}
						if (type == "ali_h5") {
							console.log('支付支付h5', that.order.non_str);
							// this.web_pay(res.order.non_str);
						}

			},
			
			ali_app(){
				uni.$u.http.post('/app/order_product/pay', {
						pay_type: this.pay_type,
						order_id: this.order_id,
						password: this.password,
						bank_image: '',
					}, {
						custom: {
							auth: true,
							toast: true,
							catch: true,
						}
					}
				
				).then(res => {
						
						console.log('================='.res)
						this.app_ali_pay(res.order.non_str);
				
				}).catch(err => {
					
				})
			},

			//余额支付
			balance_pay() {
				console.log('密码输入', this.password);
				// pay_type	 支付类型id ，order_id 订单id ，password 支付密码（余额支付）， bank_image 打款凭证 
				uni.$u.http.post('/app/order_product/pay', {
						pay_type:  this.pay_type,
						order_id: this.order_id,
						password: this.password,
						bank_image: '',
					}, {
						custom: {
							auth: true,
							toast: true,
							catch: true,
						}
					}
				).then(res => {
						let order_data = res.order;
						console.log('order_data', order_data)
						this.password_show = false;
						uni.$u.route('/pages/one_mouth/pay_win', {
							order_id: order_data.order_id
						});
				
				}).catch(err => {
					this.password = ''
				})
			},
			
			//alipay	支付宝支付	 wxpay	微信支付
			app_ali_pay(data) {
				let that = this;
				
				uni.hideLoading();
				
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: data,
					success: function(res) {
						uni.hideLoading();
						uni.$u.toast('支付成功',that.order.order_id);
						uni.$u.route('/pages/index/pay_win', {
							order_id: that.order.order_id
						});
					},
					fail: function(err) { 
						uni.hideLoading();
						uni.$u.toast('支付失败');
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			app_wx_pay(data) {
				let that = this;
				
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: JSON.stringify(data),
					success: function(res) {
						uni.hideLoading();
						uni.$u.toast('支付成功',that.order.order_id);
						uni.$u.route('/pages/index/pay_win', {
							order_id: that.order.order_id
						});
					},
					fail: function(err) {
						uni.hideLoading();
						uni.$u.toast('支付失败');
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			// h5支付 【没有对接】
			web_pay(data) {
				let html = JSON.stringify(data);
				let div = document.querySelector('#payDiv');
				if (!div) {
					div = document.createElement('div');
					div.id = 'payDiv';
					document.body.appendChild(div);
				}
				div.innerHTML = html;
				document.forms[0].submit();
			},



			close() {
				this.coupon_show = false
			},

		}
	}
</script>

<style lang='scss' scoped>
	/deep/.u-modal__button-group--confirm-button {
		padding: 0 !important;
	}

	/deep/.u-modal__content {
		padding: 0 !important;
	}

	.slot-content {
		/deep/.u-input__content__field-wrapper__field {
			height: 100rpx !important;
			text-align: center !important;
		}
	}

	// /deep/.u-modal__title {
	// 	color: #fff !important;
	// }

	.list {}


	/deep/.u-cell__body {
		padding: 20rpx 0;
	}

	/deep/.u-cell__left-icon-wrap {
		margin-right: 20rpx;
	}

	/deep/.u-cell--clickable {
		background: #232539;
	}

	/deep/.u-cell__title-text {
		color: #FFE5A5 !important;
		font-size: 28rpx;
	}

	.both_ends {
		display: flex;
		justify-content: space-between;
		color: #9D97A7;
		font-size: 26rpx;

		.both {}

		.ends {}
	}




	.flat_title {
		font-size: 30rpx;
		color: #FFE5A5;
	}

	// /deep/.u-popup__content {
	// 	background: #232539 !important;
	// }



	.scroll_box {
		.scroll {
			height: 400rpx;

		}
	}



	.pop_title {
		height: 50rpx;
		padding: 0 30rpx;
		color: #FFE5A5;
	}

	.coupon_list {
		padding: 20rpx 30rpx;

		.item {
			position: relative;
			border-radius: 10rpx;
			height: 160rpx;
			background: #4D4D5C;
			display: flex;
			justify-content: flex-start;

			.left {
				width: 206rpx;
				height: 160rpx;
				background: linear-gradient(359deg, #FF3A19 0%, #FF901D 100%);
				border-radius: 20rpx 0 0 20rpx;
				display: flex;
				flex-flow: column;
				justify-content: center;

				.price {
					font-size: 40rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 2;
				}

				.descr {
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 2;
				}
			}

			.right {
				width: 484rpx;
				height: 160rpx;
				background: #4D4D5C;
				border-radius: 0 20rpx 20rpx 0;
				display: flex;
				flex-flow: column;
				justify-content: center;
				padding: 20rpx;
				box-sizing: border-box;

				.title {
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.time {
					font-size: 20rpx;
					color: #AAAAAA;

				}
			}

			/* //设置单选框位置 */
			.radio {

				position: absolute;
				right: 20rpx;
				display: flex;
				height: 100%;
				justify-content: center;
				align-items: center;

				/deep/.u-radio__icon-wrap {
					/* background-color: #232539 !important; */
				}
			}
		}
	}
</style>
